<template>
  <div v-if="printType === 'silent'" />
  <div v-else id="printArea" ref="printArea" style="padding: 0 0 0 0">
    <div
      v-for="(citem, cindex) in bloods"
      :key="cindex"
      :ref="
        (el) => {
          if (el) printAreaRefs[cindex] = el
        }
      "
      class="printDiv"
      style="margin-bottom: 0; margin-left: 0; page-break-after: always"
    >
      <div class="t d-flex">
        <div class="t-l text-align-center">
          <div class="t-l-1 d-flex flex-column">
            <vue-barcode
              :display-value="false"
              :height="height"
              :margin="0.8"
              :value="substr(citem.id_out, 0, 14)"
              :width="1.2"
            >
              原始血袋号
            </vue-barcode>
            <div>
              <span class="font12">
                {{ substr(citem.id_out, 0, 5) }}
              </span>
              <span class="font12">
                {{ substr(citem.id_out, 5, 2) }}
              </span>
              <b class="font12">
                {{ substr(citem.id_out, 7, 7) }}
              </b>
              <span
                class="font12 text-align-center"
                style="
                  display: inline-block;
                  padding: 2px 3px;
                  margin-right: 1px;
                  border: 1px solid #999;
                "
              >
                {{ substr(citem.id_out, 14, 1) }}
              </span>
              <span
                class="font12 text-align-center"
                style="
                  display: inline-block;
                  padding: 2px 3px;
                  margin-right: 1px;
                  border: 1px solid #999;
                "
              >
                {{ substr(citem.id_out, 15, 1) }}
              </span>
              <span
                class="font12 text-align-center"
                style="
                  display: inline-block;
                  padding: 2px 3px;
                  border: 1px solid #999;
                "
              >
                {{ substr(citem.id_out, 16, 1) }}
              </span>
            </div>
            <b class="font12">{{ bloodPrint.hospital.name }}</b>
            <b class="font12">{{ bloodPrint.hospital.nameShort }}</b>
            <span class="font12">{{ bloodPrint.hospital.descri }}</span>
          </div>
          <div class="t-l-2 d-flex flex-column" style="margin-top: 4px">
            <div style="height: 36px">
              <vue-barcode
                :display-value="false"
                :height="height"
                :margin="0.8"
                :value="citem.id"
                :width="1.5"
              >
                血袋号
              </vue-barcode>
            </div>
            <b class="font18">{{ citem.id }}</b>
            <span v-if="citem.pid" class="font11">
              制备前血袋号：{{ citem.pid }}
            </span>
          </div>
          <div class="t-l-3 d-flex flex-column">
            <vue-barcode
              :display-value="false"
              :height="height"
              :margin="1"
              :value="(citem && citem.product_code) || ''"
              :width="1.1"
            >
              血液成分码
            </vue-barcode>
            <span class="text-align-left">
              {{ (citem && citem.product_code) || '' }}
            </span>
            <b class="font14 mb4 mt4">
              {{ (citem.product && citem.product.name) || '' }}
            </b>
            <span class="font14">
              血量：{{ (+citem.capacity).toFixed(1) }}U
            </span>
          </div>
        </div>
        <div class="t-r">
          <div
            class="t-r-1 d-flex flex-column align-items-center text-align-center"
          >
            <template v-if="citem.rhd === '阳性'">
              <b class="font64">
                {{ citem.abo }}
              </b>
            </template>
            <template v-else>
              <img alt="" :src="`/img/${citem.abo}.png`" />
            </template>
            <b
              class="pd4 mb4"
              :class="citem.rhd === '阴性' ? 'bg-black color-white' : ''"
              style="display: inline-block; -webkit-print-color-adjust: exact"
            >
              RH(D){{ citem.rhd }}
            </b>
            <vue-barcode
              :display-value="false"
              :height="height"
              :margin="1"
              :value="(citem && citem.abo_code) || bloodPrint.aboRhd.code"
              :width="2"
            >
              血型RHD码
            </vue-barcode>
            <span>
              {{ (citem && citem.abo_code) || bloodPrint.aboRhd.code }}
            </span>
          </div>
          <div class="h8"></div>
          <div class="t-r-2 d-flex flex-column">
            <span class="font12">
              采血时间:
              <b>
                {{
                  (citem.collect_time && citem.collect_time.substr(0, 16)) || ''
                }}
              </b>
            </span>
            <div class="h8"></div>
            <span class="font12">
              制备时间:
              <b v-if="citem.preFrom">
                {{
                  (citem.preFrom &&
                    citem.preFrom.created_at &&
                    citem.preFrom.created_at.substr(0, 16)) ||
                  ''
                }}
              </b>
              <b v-if="citem.subFrom">
                {{
                  (citem.subFrom &&
                    citem.subFrom.created_at &&
                    citem.subFrom.created_at.substr(0, 16)) ||
                  ''
                }}
              </b>
            </span>
            <div class="h8"></div>
            <span class="font12">
              失效时间:
              <b>
                {{
                  (citem.invalid_time && citem.invalid_time.substr(0, 16)) || ''
                }}
              </b>
            </span>
            <div class="h8"></div>
            <vue-barcode
              :display-value="false"
              :height="height"
              :margin="0.8"
              :value="getInvalidCode(citem)"
              :width="1.2"
            >
              失效时间码
            </vue-barcode>
            <div class="h8"></div>
            <span class="font12">
              储存：{{
                (citem.product && citem.product.temperature_self) || ''
              }}
            </span>
          </div>
        </div>
      </div>
      <div class="h9"></div>
      <div class="b d-flex align-items-center">
        <div
          v-for="(item, index) in 2"
          :key="index"
          class="b-c text-align-center"
        >
          <span class="mr4">{{ citem.donor_id }}</span>
          <span>{{ getBloodUser(citem) }}</span>
          <vue-barcode
            :display-value="false"
            :height="height"
            :margin="0.8"
            :value="citem.tube_number"
            :width="1.2"
          >
            {{ citem.tube_number }}
          </vue-barcode>
          <b :class="getClass(citem)">
            {{ citem.tube_number }} {{ citem.abo }} {{ citem.rhd }}
          </b>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import VueBarcode from 'vue-barcode'
  import { all } from '@/api/blood'
  import { mapGetters } from 'vuex'
  import { getLodop } from '@/utils/LodopFuncs'
  export default {
    components: { VueBarcode },
    data() {
      return {
        printAreaRefs: [],
        title: '打印',
        blood: {},
        height: 29,
        bloodPrint: {
          hospital: {
            name: '中国人民解放军总医院',
            nameShort: '第一医学中心',
            code: '00000210012349',
            descri: '卫血站字[2012]第1号',
          },
          id: '02116274',
          capacity: 2,
          product: {
            name: '辐照去白RH(D)阴性机采血小板',
            code: 'B0011V00',
          },
          aboRhd: {
            abo: 'AB',
            rhd: '阴性',
            code: '8400',
          },
          time: {
            collect: '2021-08-02 13:30',
            pre: '2021-08-02 13:30',
            invalid: '2021-08-02 13:30',
            invalid_code: '0272051451',
          },
        },
        bloods: [],
        strLodop: '',
      }
    },
    computed: {
      ...mapGetters(['printType', 'systemSet']),
    },
    methods: {
      getClass(blood) {
        if (blood && blood.abo === 'AB') {
          return 'font15'
        }
        return 'font16'
      },
      getInvalidCode(item) {
        this.blood = item
        if (this.blood) {
          if (this.blood.invalid_time_code) {
            return this.blood.invalid_time_code
          }
          if (this.blood.invalid_time) {
            return this.blood.invalid_time.substr(0, 10).replace('-', '')
          }
        }
        return ''
      },
      getBloodUser(blood) {
        if (blood.blood_user) {
          return blood.blood_user
        }
        if (blood.id_out) {
          return blood.id_out.replace('=', '').substr(5, 8)
        }
        return ''
      },
      substr(str, start, length) {
        if (str && str.length > 0) {
          return str.substr(start, length)
        }
        return ''
      },
      show(row) {
        const ids = row.map((val) => val.id)
        this.all(ids)
      },
      async all(ids) {
        const { data } = await all(ids)
        this.bloods = data
        // 打印ref为printAreaRefs的内部的HTML内容

        if (this.printType === 'silent') {
          //   在这里lodop打印设计
          // for (let blooditem of this.bloods) {
          //   this.printByLodop(1, 800, 950, blooditem)
          // }
          this.printByLodop(1, 800, 950, this.bloods)
        }
      },
      getStrValue(strings) {
        if (strings) {
          return strings
        } else {
          return ''
        }
      },
      printByLodop(type, width, height, bloods) {
        var LODOP = getLodop() //调用getLodop获取LODOP对象
        LODOP.PRINT_INITA(2, 2, 302, 359, '')
        LODOP.SET_PRINT_PAGESIZE(type, width, height)
        LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE', 1)
        bloods.forEach((blooditem, index) => {
          if (blooditem.id_out && blooditem.id_out !== '') {
            let id_out = blooditem.id_out
            if (blooditem.id_out.slice(0, 1) === '=') {
              id_out = id_out.slice(1, 14)
            }
            LODOP.ADD_PRINT_BARCODE(6, 7, 192, 35, '128B', id_out)
            LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
            LODOP.ADD_PRINT_TEXT(42, 13, 50, 20, id_out.slice(0, 5))
            LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
            LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
            LODOP.SET_PRINT_STYLEA(0, 'LetterSpacing', 1)
            LODOP.ADD_PRINT_TEXT(42, 55, 26, 20, id_out.slice(5, 7))
            LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
            LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
            LODOP.SET_PRINT_STYLEA(0, 'LetterSpacing', 1)
            LODOP.ADD_PRINT_TEXT(42, 78, 60, 20, id_out.slice(7, 13))
            LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
            LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
            LODOP.SET_PRINT_STYLEA(0, 'LetterSpacing', 1)
            LODOP.ADD_PRINT_TEXT(42, 135, 52, 20, id_out.slice(13))
            LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
            LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
            LODOP.SET_PRINT_STYLEA(0, 'TextFrame', 5)
            LODOP.SET_PRINT_STYLEA(0, 'LetterSpacing', 5)
          } else {
            let id_out = '原始血袋号不存在'
            console.log(id_out)
            LODOP.ADD_PRINT_TEXT(20, 10, 170, 40, id_out)
          }
          LODOP.ADD_PRINT_TEXT(59, 15, 157, 20, '中国人民解放军总医院')
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
          LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
          LODOP.ADD_PRINT_TEXT(73, 41, 110, 20, '第一医学中心')
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
          LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
          LODOP.ADD_PRINT_TEXT(91, 27, 149, 20, '卫血站字[2012]第1号')
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
          LODOP.ADD_PRINT_BARCODE(
            129,
            7,
            157,
            50,
            '128B',
            this.getStrValue(blooditem.id)
          )
          LODOP.SET_PRINT_STYLEA(0, 'FontSize', 12)
          if (blooditem.pid) {
            LODOP.ADD_PRINT_TEXT(
              107,
              10,
              158,
              20,
              '制备前血袋号:' + this.getStrValue(blooditem.pid)
            )
            LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
            LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
          }
          if (blooditem.product_code) {
            LODOP.ADD_PRINT_BARCODE(
              190,
              15,
              139,
              28,
              '128B',
              blooditem.product_code
            )
            LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
          }
          if (blooditem.product && blooditem.product.name) {
            LODOP.ADD_PRINT_TEXT(218, 8, 128, 20, blooditem.product.name)
            LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
            LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
            LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
            LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
          }
          LODOP.ADD_PRINT_TEXT(
            256,
            30,
            100,
            20,
            '血量：' + (+blooditem.capacity).toFixed(1) + 'U'
          )
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
          LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
          LODOP.ADD_PRINT_TEXT(
            280,
            16,
            132,
            20,
            blooditem.donor_id + ' ' + this.getBloodUser(blooditem)
          )
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.ADD_PRINT_BARCODE(
            300,
            14,
            157,
            32,
            '128B',
            blooditem.tube_number
          )
          LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
          LODOP.ADD_PRINT_TEXT(
            336,
            14,
            145,
            20,
            blooditem.tube_number + ' ' + blooditem.abo + ' ' + blooditem.rhd
          )
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
          LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
          if (blooditem.rhd === '阳性') {
            LODOP.ADD_PRINT_TEXT(-6, 190, 95, 57, blooditem.abo)
            LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
            LODOP.SET_PRINT_STYLEA(0, 'FontSize', 45)
            LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
            LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
            LODOP.ADD_PRINT_TEXT(58, 190, 100, 20, 'RH(D)阳性')
            LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
            LODOP.SET_PRINT_STYLEA(0, 'FontSize', 12)
            LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
          } else {
            LODOP.ADD_PRINT_TEXT(-6, 190, 95, 57, blooditem.abo)
            LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
            LODOP.SET_PRINT_STYLEA(0, 'FontSize', 45)
            LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
            LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
            LODOP.SET_PRINT_STYLEA(0, 'OutLine', 1)
            LODOP.ADD_PRINT_TEXT(58, 193, 100, 20, 'RH(D)阴性')
            LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
            LODOP.SET_PRINT_STYLEA(0, 'FontSize', 12)
            LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
            LODOP.SET_PRINT_STYLEA(0, 'OutLine', 1)
          }
          if (blooditem.abo_code) {
            LODOP.ADD_PRINT_BARCODE(82, 185, 99, 38, '128B', blooditem.abo_code)
          }

          LODOP.ADD_PRINT_TEXT(
            124,
            144,
            170,
            20,
            '采血时间:' +
              ((blooditem.collect_time &&
                blooditem.collect_time.slice(0, 16)) ||
                '')
          )
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
          let time_str = ''
          if (blooditem.preFrom) {
            time_str =
              blooditem.preFrom.created_at &&
              blooditem.preFrom.created_at.slice(0, 16)
          } else if (blooditem.subFrom) {
            time_str =
              blooditem.subFrom.created_at &&
              blooditem.subFrom.created_at.slice(0, 16)
          }
          LODOP.ADD_PRINT_TEXT(150, 143, 170, 20, '制备时间:' + time_str)
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
          LODOP.ADD_PRINT_TEXT(
            176,
            143,
            170,
            20,
            '失效时间:' +
              ((blooditem.invalid_time &&
                blooditem.invalid_time.slice(0, 16)) ||
                '')
          )
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
          LODOP.ADD_PRINT_BARCODE(
            233,
            152,
            135,
            37,
            '128B',
            this.getInvalidCode(blooditem)
          )
          LODOP.ADD_PRINT_TEXT(
            201,
            140,
            147,
            20,
            '储存：' +
              (blooditem.product && blooditem.product.temperature_self) || ''
          )
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
          LODOP.ADD_PRINT_TEXT(
            280,
            163,
            132,
            20,
            blooditem.donor_id + ' ' + this.getBloodUser(blooditem)
          )
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.ADD_PRINT_BARCODE(
            300,
            160,
            157,
            32,
            '128B',
            blooditem.tube_number
          )
          LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
          LODOP.ADD_PRINT_TEXT(
            336,
            159,
            145,
            20,
            blooditem.tube_number + ' ' + blooditem.abo + ' ' + blooditem.rhd
          )
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '微软雅黑')
          LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
          LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
          if (index < bloods.length - 1) {
            console.log('新一页')
            LODOP.NewPage() // 只在非最后一页添加新页面
          }
          if (this.systemSet.silent_preview) {
            // LODOP.PRINT_DESIGN()
            LODOP.PREVIEW()
          } else {
            console.log('***********print***********')
            LODOP.PRINT()
            // LODOP.PREVIEW()
          }
          // 打印回调函数
          // LODOP.On_Return = (TaskID, Value) => {
          //   // TaskID 任务的唯一标识符。在执行打印、预览等操作时，LODOP 会为每个操作分配一个唯一的任务 ID。通过这个 ID 可以区分不同的操作任务
          //   // Value 0打印成功 1打印失败
          //   if (+Value === 0) {
          //     console.log('打印成功')
          //     this.$baseEventBus.$emit('reload-router-view')
          //   } else {
          //     console.log('放弃打印')
          //     this.$baseEventBus.$emit('reload-router-view')
          //   }
          // }
        })
      },
      close() {
        this.doPrints()
        this.bloods = []
        this.$emit('getAll')
      },
    },
  }
</script>

<style lang="scss" scoped>
  @media print {
    @page {
      margin: 0 !important; /* 设置页边距为0 */
    }
  }
  #printArea {
    width: 306px;
    color: #111;
  }
  .t-l {
    width: 155px;
  }
  .t-r {
    width: 151px;
  }
  .b-c {
    width: 151px;
  }
  .font {
    &10 {
      font-size: 20px;
      transform: scale(0.5); /* 然后缩小至80% */
      transform-origin: 0 0; /* 可能需要指定缩放原点以确保准确缩放 */
    }
    &11 {
      font-size: 11px;
    }
    &12 {
      font-size: 12px;
    }
    &14 {
      font-size: 14px;
    }
    &16 {
      font-size: 16px;
    }
    &18 {
      font-size: 18px;
    }
    &20 {
      font-size: 20px;
    }
    &22 {
      font-size: 22px;
    }
    &24 {
      font-size: 24px;
    }
    &36 {
      font-size: 36px;
    }
    &40 {
      font-size: 40px;
    }
  }
  .mr {
    &4 {
      margin-right: 4px;
    }
    &6 {
      margin-right: 6px;
    }
    &8 {
      margin-right: 8px;
    }
    &10 {
      margin-right: 10px;
    }
    &12 {
      margin-right: 12px;
    }
  }
</style>
